<template>
  生成分享图片时，只需要定义一组元素位置即可（可参考代码中的节点定义）<br />
  <h5 style="color:rgb(48, 65, 251)">（ 建议：定义完元素位置后，实际加载节点的时候将所有的元素放大一倍，否则导出后的图片会变的模糊，放大可参考示例代码中 setProp 方法 ）</h5>
  <b style="color:red;font-size:20px">注意: </b>生成图片时需要在画布最下方放置一个与画布等大小的纯色矩形，否则导出后的图案背景会变成透明<br />
  <br />
  <el-button @click="download">
    导出图片
  </el-button>
  <br />
  <br />
  <canvas
    id='share'
    class="shareStyle"
  ></canvas>

</template>

<script setup>
import { init } from "@/home/common.js";
import { shareExample } from "@/home/node-example.js";
import { onMounted } from "vue";

let share;
let width = 370;
let height = 570;
let transform = 2; // 缩放倍数

onMounted(() => {
  let shareDom = document.getElementById("share");

  // 修改元素宽高
  shareDom.style.width = width + "px";
  shareDom.style.height = height + "px";

  if (!share)
    share = init(
      {
        width: width * transform,
        height: height * transform,
        drag: false,
      },
      shareDom
    );

  for (let i of shareExample) {
    setProp(i); // 重新修正属性信息（主要为了防止导出图案后显示模糊，使用该方法自动将图案等倍数放大）
    share.addNode(i);
  }
});

/*
  用途：重新修正属性信息
  原理：定义一块宽高为 10*10 的画布，实际在画布中加载图案的时候按照 100*100 的宽高去加载，则显示出来的效果就算放大 10 倍也不会失真
*/
const setProp = (obj) => {
  Object.keys(obj).forEach((prop) => {
    if (typeof obj[prop] === "number") {
      obj[prop] = obj[prop] * transform;
    } else if (typeof obj[prop] === "object") {
      setProp(obj[prop]);
    }
  });
};

const download = () => {
  let a = document.createElement("a");
  document.body.appendChild(a);
  a.href = document.getElementById("share").toDataURL();
  a.download = "share.png";
  a.click();
  document.body.removeChild(a);
};
</script>

<style scoped>
.shareStyle {
  border: 1px solid rgb(214, 213, 213);
  border-radius: 15px;
}
</style>